<!--
 * @Author: yang_jl@ecidi.com
 * @Date: 2020-03-09 09:42:23
 * @LastEditors: wei_jt@ecidi.com
 * @LastEditTime: 2021-12-23 10:47:02
 * @Description: 岗位管理
 -->
<template>
  <div style="min-width: 552px; height: 100%" class="post">
    <fks-query-page
      v-loading="loading"
      :data="postData"
      :current-page.sync="currentPage"
      :page-sizes="[20, 50, 100]"
      :page-size.sync="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      :element-loading-text="LANG.LOADING"
      :table-name="LANG.POSITION_LIST"
      @query="getPost"
      @sort-change="sortHandler"
    >
      <template slot="singleSearch">
        <div class="single-searchBox">
          <fks-input
            v-model="postName"
            :placeholder="LANG.USERMANAGEMENT_SEARCH_PLACEHOLDER"
            class="single-searchBox-item"
            clearable
            maxlength="50"
            @clear="search"
            @keyup.enter.native="search"
          >
            <fks-button slot="append" icon="fks-icon-search" @click="search" />
          </fks-input>
          <fks-button
            v-permission:1="['position:add']"
            type="primary"
            icon="fks-icon-plus"
            @click="addPost"
          >
            <span> {{ LANG.ADD }}</span>
          </fks-button>
        </div>
      </template>
      <template>
        <fks-table-column type="index" align="center" label="#" width="55" />
        <fks-table-column
          :label="LANG.NAME"
          prop="postName"
          sortable="custom"
          min-width="150"
          align="left"
          header-align="center"
        />
        <fks-table-column
          :label="LANG.CODE"
          min-width="150"
          align="left"
          sortable="custom"
          prop="postCode"
        />
        <fks-table-column
          type="wide"
          prop="remark"
          :label="LANG.REMARK"
          min-width="200"
        />
        <fks-table-column :label="LANG.OPERATION" width="200" align="left">
          <template slot-scope="scope">
            <fks-button
              v-permission:1="['position:member']"
              type="text"
              @click="handleMember(scope.row)"
            >
              {{ LANG.MEMBER }}
            </fks-button>
            <fks-button
              v-permission:1="['position:role']"
              type="text"
              @click="roleGroupEdit(scope.row)"
            >
              {{ LANG.ROLE }}
            </fks-button>
            <fks-button
              v-permission:1="['position:edit']"
              type="text"
              @click="handleEdit(scope.row)"
            >
              {{ LANG.EDIT }}
            </fks-button>
            <fks-button
              v-permission:1="['position:delete']"
              type="text"
              danger-text
              @click="deletePosts(scope.row)"
            >
              {{ LANG.DELETE }}
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <role-group-detail
      :visible.sync="visible"
      :data="node"
      :post-type="postType"
    />
    <role-group-edit :visible.sync="editVisible" :data="node" />
    <member-detail :data="node" :visible.sync="memberVisible" />
  </div>
</template>
<script>
import * as Auth from './api'
import RoleGroupDetail from './RoleGroupDetail'
import MemberDetail from './MemberDetail'
import RoleGroupEdit from './RoleGroupEdit'
import * as types from '@/store/Getter/getterTypes.js'
import Mix from '@/mixins/module'
export default {
  name: 'Position',
  components: {
    RoleGroupDetail,
    MemberDetail,
    RoleGroupEdit
  },
  mixins: [Mix],
  data() {
    return {
      postData: [],
      loading: false,
      currentPage: 1,
      pageSize: 20,
      total: 0,
      visible: false,
      memberVisible: false,
      editVisible: false,
      node: {},
      sort: '',
      columnName: '',
      postType: '',
      postName: ''
    }
  },
  computed: {
    type() {
      return this.$store.state.portal.type
    },
    portalId() {
      return this.$store.state.portal.id
    },
    multiPortal() {
      return this.$store.getters[types.MULTI_PORTAL]
    }
  },
  created() {
    this.getPost()
  },
  methods: {
    //列表排序方法
    sortHandler(data) {
      let params = {}
      if (!data.order) {
        this.sort = ''
        this.columnName = ''
      } else {
        this.sort = data.order == 'ascending' ? 'asc' : 'desc'
        this.columnName = data.prop == 'postName' ? 'post_Name' : 'post_Code '
      }
      params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        portalId: this.portalId,
        searchValue: this.postName,
        sort: this.sort,
        columnName: this.columnName
      }
      this.getPostList(params)
    },
    //搜索项清空方法
    search() {
      this.currentPage = 1
      this.getPost()
    },
    //获取岗位列表数据
    getPost() {
      this.loading = true
      let params = {
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        searchValue: this.postName,
        portalId: this.portalId,
        sort: this.sort,
        columnName: this.columnName
      }
      this.getPostList(params)
    },
    //获取岗位列表数据
    @permission('position:query')
    getPostList(params) {
      Auth.getPost(params)
        .then((res) => {
          this.loading = false
          if (res.status && res.data) {
            this.postData = res.data.list
            this.total = res.data.total
          }
        })
        .catch(() => {
          this.loading = false
        })
    },
    //管理岗位内成员
    handleMember(row) {
      this.node = Object.assign({}, row)
      this.memberVisible = true
    },
    //管理岗位内角色
    roleGroupEdit(row) {
      this.node = Object.assign({}, row)
      this.editVisible = true
    },
    //编辑岗位
    handleEdit(row) {
      this.node = Object.assign({}, row)
      this.postType = 'edit'
      this.visible = true
    },
    //新增岗位
    addPost() {
      this.postType = 'add'
      this.node = {}
      this.visible = true
    },
    //删除岗位
    deletePosts(row) {
      this.$confirm(this.LANG.DELETE_CONFIRM, {
        title: this.LANG.TIPS,
        type: 'warning',
        confirmButtonText: this.LANG.DELETE,
        cancelButtonText: this.LANG.CANCEL,
        confirmButtonClass: 'fks-button--danger',
        deleteMode: true
      }).then(() => {
        Auth.deletePost(row.id).then((res) => {
          if (res.status) {
            if (this.currentPage != 1) {
              this.currentPage = 1
            }
            this.$message.success(this.LANG.DELETE_SUCCESS)
            this.getPost()
          }
        })
      })
    }
  }
}
</script>
<style  lang="scss" scoped>
.post {
  background: #fff;
}

::v-deep .fks-dialog__body {
  padding-bottom: 0;
}
</style>